<template>
  <view class="search-bar">
    <input
      class="search-input"
      :placeholder="placeholder"
      :value="modelValue"
      @input="onInput"
    />
  </view>
</template>

<script setup lang="ts">
interface Props {
  placeholder?: string
  modelValue?: string
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '请输入搜索内容',
  modelValue: ''
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
  search: [value: string]
}>()

const onInput = (e: any) => {
  const value = e.detail.value
  emit('update:modelValue', value)
  emit('search', value)
}
</script>

<style lang="scss" scoped>
.search-bar {
  padding: 12px;
  background: #fff;

  .search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 18px;
    background: #f5f5f5;
    font-size: 14px;

    &:focus {
      border-color: #1890ff;
      background: #fff;
    }
  }
}
</style>